<template>
  <div style="padding-bottom: 15px;">
    <div class="header">
      <div style="margin-bottom:0">活动名称：{{ssInfo?ssInfo.matchTitle:'未选择活动'}}</div>

    </div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="表单名称" prop="formName">
        <el-input
          v-model="queryParams.formName"
          placeholder="请输入表单名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['apply:form:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['apply:form:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['apply:form:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['apply:form:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="formList" @selection-change="handleSelectionChange" @cell-click="bmInfoShow">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="报名表单ID" align="center" prop="formId" />-->
      <el-table-column label="表单名称" align="center" prop="formName"/>
      <el-table-column label="表单类型" align="center" prop="formType" >
       <template slot-scope="scope">
        <dict-tag :options="dict.type.hd_form_type " :value="scope.row.formType"/>
      </template>
      </el-table-column>

      <el-table-column label="开始时间" align="center" prop="startTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}  {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}  {h}:{i}:{s}') }}</span>

        </template>
      </el-table-column>
      <el-table-column label="是否缴费" align="center" prop="reqPay">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hd_common_req" :value="scope.row.reqPay"/>
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center" prop="payMoney" />
      <el-table-column label="缴费范围" align="center" prop="payType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hd_pay_type" :value="scope.row.payType"/>
        </template>
      </el-table-column>
      <el-table-column label="是否人工审核" align="center" prop="reqAudit">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hd_common_req" :value="scope.row.reqAudit"/>
        </template>
      </el-table-column>
      <el-table-column label="使用状态" align="center" prop="formStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hd_form_status" :value="scope.row.formStatus"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="备注" align="center" prop="remark" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">

        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.stop="handleZdse(scope.row)"
            v-hasPermi="['apply:form:zdsz']"
          >字段</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.stop="handleUpdate(scope.row)"
            v-hasPermi="['apply:form:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click.stop="handleDelete(scope.row)"
            v-hasPermi="['apply:form:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!--修改报名表单管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body center>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" />
        </el-form-item>


        <el-form-item label="表单类型" prop="formType">
          <el-select v-model="form.formType" placeholder="请选择">

            <el-option
             v-for="dict in dict.type.hd_form_type"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报名时间">
          <el-date-picker
            v-model="datePickRangeInput"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否缴费" prop="reqPay">
          <el-radio-group v-model="form.reqPay" >

            <el-radio
              v-for="dict in dict.type.hd_common_req"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="金额" prop="payMoney">
          <el-input type="number" v-model="form.payMoney" placeholder="请输入金额" :disabled="form.reqPay==1"/>
        </el-form-item>
        <el-form-item label="缴费范围" prop="payType">
          <el-radio-group v-model="form.payType">
            <el-radio
              v-for="dict in dict.type.hd_pay_type"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否人工审核" prop="reqAudit">
          <el-radio-group v-model="form.reqAudit">
            <el-radio
              v-for="dict in dict.type.hd_common_req"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="使用状态" prop="formStatus" >
          <el-radio-group v-model="form.formStatus" :disabled="(new Date(datePickRangeInput[1]))-(new Date())<0?true:false">
            <el-radio
              v-for="dict in dict.type.hd_form_status"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" round>确 定</el-button>
        <el-button @click="cancel" round>取 消</el-button>
      </div>
    </el-dialog>

    <!--添加报名表单管理对话框-->
    <el-dialog :title="title" :visible.sync="addOpen" width="50%" append-to-body center>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" />
        </el-form-item>


        <el-form-item label="表单类型" prop="formType">

          <el-select v-model="form.formType" placeholder="请选择">
            <el-option
              v-for="dict in dict.type.hd_form_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              :disabled="formTypeArr.includes(dict.value)"
            >
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="报名时间">
          <el-date-picker
            v-model="datePickRangeInput"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否缴费" prop="reqPay">
          <el-radio-group v-model="form.reqPay" >

            <el-radio
              v-for="dict in dict.type.hd_common_req"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="金额" prop="payMoney">
          <el-input type="number" v-model="form.payMoney" placeholder="请输入金额" :disabled="form.reqPay==1"/>
        </el-form-item>
        <el-form-item label="缴费范围" prop="payType">
          <el-radio-group v-model="form.payType">
            <el-radio
              v-for="dict in dict.type.hd_pay_type"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否人工审核" prop="reqAudit">
          <el-radio-group v-model="form.reqAudit">
            <el-radio
              v-for="dict in dict.type.hd_common_req"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="使用状态" prop="formStatus">
          <el-radio-group v-model="form.formStatus">
            <el-radio
              v-for="dict in dict.type.hd_form_status"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" round>确 定</el-button>
        <el-button @click="cancel" round>取 消</el-button>
      </div>
    </el-dialog>

    <!--报名设置-->
    <el-drawer
      title="报名列表" size="100%"
      :visible.sync="bmInfoDrawerOpen">

      <bmInfo :row="TableColumnList"></bmInfo>
    </el-drawer>

    <!--字段设置-->
    <el-drawer
      title="字段设置" size="100%"
      :visible.sync="drawerOpen">

     <zdsz ref="zdszRef" :bdInfo="bdInfo" :isDrawer="drawerOpen"></zdsz>
    </el-drawer>
  </div>
</template>

<script>
import { listForm, getForm, delForm, addForm, updateForm } from "@/api/match/form";

import zdsz from '../zdsz'
import bmInfo from '../apply'
import moment from 'moment';

export default {
  components:{
    zdsz,bmInfo
  },
props:{
  ssInfo:{
    type:Object,
    default:null
  },
},
  computed:{
  //  ...mapState('matchInfo',['a']),
  },
  name: "Form",
  dicts: ['hd_form_status', 'hd_common_req', 'hd_pay_type','hd_form_type'],
  data() {
    return {
      formTypeArr:[],//formList里的formtype
      TableColumnList:{},//表单某行的信息
      bmInfoDrawerOpen:false,//报名信息弹框
        /**
         * 报名信息结束**/
      //表单报名时间【在赛事开始之前】
      datePickRangeInput:[],
      pickerOptions:{
        disabledDate: time => {
          //console.log(789789,new Date(this.ssInfo.startTime),'------',new Date(this.ssInfo.endTime))
          let flag=time.getTime() < new Date(this.ssInfo.endTime) ;
          return !flag
        },
      },


      drawerOpen:false,//字段设置弹框
      bdInfo:{},//表单信息

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 报名表单管理表格数据
      formList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层【修改】
      open: false,
      // 是否显示弹出层【新建】
      addOpen:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        formName: null,
       matchId: '',
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        formName:[
          { required: true, message: '请输入表单名称', trigger: 'blur' }
        ],
        formType:[
          { required: true, message: '请选择表单类型', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
      }
    };
  },
  created() {



    this.queryParams.matchId=this.ssInfo.matchId
    this.getList();
  },

  watch:{
      "ssInfo.matchId":{
        handler(news,old){
          this.loading = true;
          this.queryParams.matchId=news
          listForm(this.queryParams).then(response => {
            this.formList = response.rows;
            this.total = response.total;
            this.loading = false;
          });

        }
      }
  },
  methods: {
    //将时间转成字符串方法
   /* formatDateStr(dateP) {
      let now = new Date(dateP);
      let year = now.getFullYear();
      let month = (now.getMonth() + 1).toString().padStart(2, "0");
      let date = (now.getDate()).toString().padStart(2, "0");
      let hh = (now.getHours()).toString().padStart(2, "0");
      let mm = (now.getMinutes()).toString().padStart(2, "0");
      let ss = (now.getSeconds()).toString().padStart(2, "0");
      return `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
    },*/
    //报名表单时间选择
    changePick(){

    },
  /*字段*/
    handleZdse(row){
      this.drawerOpen=true;
      this.bdInfo=row;
      console.log(this.bdInfo)
    },


    //...mapActions('m_zyzsq',['getGrjn','getFwlb','registerZyz']),
    /** 查询报名表单管理列表 */

    //报名信息展示
    bmInfoShow(row){
      this.bmInfoDrawerOpen=true;
      this.TableColumnList=row

    },



    getList() {
      this.loading = true;
      this.queryParams.matchId=this.ssInfo.matchId
      listForm(this.queryParams).then(response => {
        this.formList = response.rows;

        this.formTypeArr=[]//创建表单选择类型时查找已经创建的类型
        //如果报名时间小于当前时间说明表单已经过期状态改为停止使用
        this.formList.forEach(item=>{
          if(moment(item.endTime).valueOf()-moment().valueOf()<0){
            item.formStatus="1"
            updateForm(item).then(response => {
            });
          }
          //获取所有已经创建的表单类型以便创建时查询剩下的类型
          this.formTypeArr.push(item.formType)
        })
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.addOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        matchId:'',
        formId: null,
        formName: null,
        formType: null,
        startTime: null,
        endTime: null,
        reqPay: '1',
        payMoney: null,
        payType: 'normal',
        reqAudit: '1',
        formStatus: '1',
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.formId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.datePickRangeInput=[];
      this.reset();
      this.addOpen = true;
      this.title = "添加报名表单管理";
      this. getList()


    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const formId = row.formId || this.ids
      getForm(formId).then(response => {
        this.form = response.data;
        console.log(this.form)
        this.datePickRangeInput=[]
       this.datePickRangeInput[0]=response.data.startTime
        this. datePickRangeInput[1]=response.data.endTime
        this.open = true;
        this.title = "修改报名表单管理";
      });
    },
    /** 提交按钮 */
    submitForm() {

      this.form.matchId=this.ssInfo.matchId
      //报名时间必选
      if(this.datePickRangeInput.length==0) {
        this.$message({
          message:'请选择报名时间',
          type: 'warning'
        });
        return
      }else{
        this.form.startTime=moment(this.datePickRangeInput[0]).format('YYYY-MM-DD HH:mm:ss')
        this.form.endTime=moment(this.datePickRangeInput[1]).format('YYYY-MM-DD HH:mm:ss')
      }

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.formId != null) {
            updateForm(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            let flag=false;
            if(this.formList.length>0){
              this.formList.forEach(item=>{
                if(item.formStatus =='0'&&this.form.formStatus=='0'){
                  flag=true;
                  this.$message({ message:`报名表单${item.formName}正在使用`,type: 'warning'});
                }
              })
              if(flag) return
            }
            addForm(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.addOpen = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const formIds = row.formId || this.ids;
      this.$modal.confirm('是否确认删除报名表单管理编号为"' + formIds + '"的数据项？').then(function() {
        return delForm(formIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('apply/form/export', {
        ...this.queryParams
      }, `form_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped lang="scss">
.header{padding: 0 0 20px  0;color:#1890ff;}
::v-deep{
  .el-checkbox__label{display: none}
  .el-dialog {
    border-radius: 11px;
  }
}
</style>
